<?php include THEMES_PATH . 'public/before_body2.phtml';?>
<style>
.appointment {font-size:14px;}
.appointment em {display:inline-block;width:90px;padding-right:20px;font-size:16px;font-style:normal;vertical-align:middle;}
.appointment input, .appointment textarea {display:inline-block;width:92%;resize:none;}
.appointment input {height: 40px}
.appointment textarea {min-height:100px;}
.arrange-horizontal label {float: left; width:33.33333%;}
.arrange-horizontal input, .arrange-horizontal select {width:76%;}
.arrange-horizontal select {height:40px;border:1px solid #ccc;}
.appointment .btn {width:200px;max-height:40px;height:40px;font-size:16px;}
.appointment .error.msg {margin-top:-25px;text-align:left;}
.phone-box {padding:3em;border:1px solid #ccc;}
.phone-box p {display:inline-block;position:absolute;top:-20px;left:42.5%;padding:0 10px;background-color:#fff;font-size:24px;color:#4a4a4a;}
.shop strong {font-size:18px;}
.shop span {font-size:14px;}
.map-view {
  display: inline-block;
  height: 16px;
  padding-right: 25px;
  background: url() no-repeat right center;
  line-height: 1;
}
.shop-trans {
  overflow: hidden;
  position: relative;
}
.shop-trans p,
.shop-trans img {
  transition: all .5s;
}
.shop-trans img {
  position: relative;
  right: 0;
}
.shop-trans.one img {
  right: auto;
  left: 0;
}
.shop-trans p {
  position: absolute;
  top: 0;
  right: 350px;
  bottom: 0;
  padding: 2em 6em 0;
  transform: translateX(100px);
  opacity: 0;
}
.shop-trans.one p {
  right: auto;
  transform: translateX(-100px);
}
.shop-trans:hover p {
  transform: translateX(80px);
  transition: all .4s .5s;
  opacity: 1;
}
.shop-trans:hover img {
  right: 20em;
}

.shop-trans.one:hover img {
  left: 25em;
}

.ie6 .shop p {
  position: static;
  padding: 0;
  margin-bottom: 30px;
}

.map {
  position: absolute;
  z-index: 5;
  min-width: 300px;
  border: 1px solid #000;
  box-shadow: 0 0 5px #000;
}

@media screen and (max-width: 930px) {
  .phone-box {margin-right:2%;margin-left:2%;}
}

@media screen and (max-width: 930px) {
  .appointment label em {display:block;margin-bottom:5px;}
  .arrange-horizontal em {text-align:left !important;}
  .appointment .btn-row {text-align:center !important;}
}

@media screen and (max-width: 768px) {
  .phone-box p {right:0;left:0;max-width:240px;margin-right:auto;margin-left:auto;}.shop-trans:hover img {
  right: 0!important;
}
}

@media screen and (max-width: 568px) {
  .arrange-horizontal label {display:none;float:none;width:100%;}
	.pc-hide,.baomixieyi{display: none;}
  .appointment input, .appointment textarea, .appointment select {width:100%;}
  .appointment .btn {width:100%;height:40px;}
  .phone-box p {top:-17px;font-size:20px;}
}

</style>
</head>
<body>
<?php include THEMES_PATH.'public/header2.phtml';?>
<link rel="stylesheet prefetch" href="/statics/front/css/font-awesome.min.css">
<div class="mb1x align-center">
  <img src="/statics/front/images/measure/schedule/1.jpg" alt="预约量体" class="hi-xs">
  <img src="/statics/front/images/measure/schedule/1-mobile.jpg" alt="预约量体" class="vi-xs">
</div>
<!--
<div class="main-width mb2x" style="font-size:14px;">
  <p class="black">想要一套合身的西装，不知道自己的精确尺寸? </p>
  <p class="black">没时间学习如何量体？或找不到帮手量体？又不想去裁缝店？</p>
  <p class="black">您只要填写一下信息，我们会安排专业的量体师，上门为您服务，并协助您挑选西服的面料及款式，您只要坐在家中等西服送到您手中！</p>
  <p>(我们会收取99元的量体费用; 如果您的订单超过2999，可免收量体费; 您也可以选择到店量体，免收量体费。) <a href="javascript:;" class="map-view js-map2">查看地址</a></p>
</div>
-->
<!--计数器计数器--><!--计数器计数器-->
<div class="number-wrap">
    <div class="counter col_fourth">恭候，我们第
	<a class="timer count-title" id="count-number" data-to="<?php echo $user_measure_count; ?>" data-speed="1500">0</a> 位预约客人!
</div>
	</div>
<!--计数器计数器--><!--计数器计数器-->
<form method="post" action="__SELF__" id="form_1" class="js-form main-width mb4x appointment js-appointment mbile-hide">
  <input type="hidden" name="ordertoken" value="<?php echo $ordertoken?>">
  <div class="pull-left  mbile-hide" style="width: 48%!important;margin-left: 0!important">
      <em  style=" padding-right:10px;">&nbsp;身高</em>
      <div class="datas-box"><input type="text" class="data" name="height" title="不能为空" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"><div class="dw">cm</div>
		 </div>
     </div>
       <div class="pull-left  mbile-hide" style="width: 48%!important;margin-left: 4%!important">
      <em style=" padding-right:10px;">&nbsp;体重</em>
      <div class="datas-box"><input type="text" class="data" name="weight" title="不能为空" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"><div class="dw">kg</div>
		 </div>
     </div>

    <div style="clear: both;"></div>
  <div class="datas-box">
        <div class="data-title">姓名</div>
        <input type="text" class="data" name="name">
 </div>
 <div class="datas-box">
        <div class="data-title">电话</div>
        <input type="tel" class="data" name="phone" onKeyUp="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" >
 </div>
    <input type="hidden" name="class_id" value="2"><!--手机端默认是上门量体-->
 <div class="datas-box">
        <div class="data-title">城市</div>
	 <select type="text" class="data city_id"  name="city_id" style="border: none;background-color:#fff">
	    <option value="0">请选择</option>
       <option value="0571">杭州</option>
        <option value="0510">无锡</option>
        <option value="025">南京</option>
	 </select>
	 <!-- <i><img src="/statics/front/images/measure/schedule/ico-triangle-down.png"></i>-->
 </div>
 <!--<div class="datas-box hide js-area hangzhou_area" style="width: 48%!important;float: left;margin-left: 4%">
	 <div class="data-title">区域</div>
	 <select type="text" class="data area_option" name="name" style="width: 65%!important;margin-left: 25%;  border: none;background-color:#fff">
	 	<option value="0">请选择区域</option>
        <?php foreach (C("area") as $k=>$v):?>
        <option value="<?php echo $k;?>"><?php echo $v?></option>
        <?php endforeach;?>
	 </select>
	 <!-- <i><img src="/statics/front/images/measure/schedule/ico-triangle-down.png"></i>
 </div>-->
 <div class="clearfix"></div>
 <div class="datas-box">
        <div class="data-title">地址</div>
        <input type="text" class="data" name="address">
 </div>
 </div>
 <div class="align-center btn-row" style="margin-top: 40px;">
    <input type="hidden" name="dosubmit" value="1">
	<input type="button" id="submit_1" class="btn" value="立即预约"/>
  </div>
 </form>

 <form method="post" action="__SELF__" id="form_2" class="js-form main-width mb4x appointment pc-hide">
  <input type="hidden" name="ordertoken" value="<?php echo $ordertoken?>">

  <div class="clearfix arrange-horizontal ">
    <label class="mb2x" style="float:left">
      <em class="align-right" style="padding-right: 10px!important;"> 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</em>
      <input type="text" name="name" title="<?php echo L('name_required'); ?>">
    </label>
    <label class=" mb2x" style="float:left">
      <em class="align-right" style="padding-right:10px;">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</em>
      <input type="text" name="phone" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,&#39;&#39;)}else{this.value=this.value.replace(/\D/g,&#39;&#39;)}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,&#39;&#39;)}else{this.value=this.value.replace(/\D/g,&#39;&#39;)}" title="<?php echo L('phone_required'); ?>">
    </label>
    <label class="pull-left mb2x" style="margin-left: 0!important">
      <em class="align-right" style=" padding-right:10px;">身&nbsp;高:&nbsp;cm</em>
      <input type="text" class="name" name="height" title="请填写您的具体身高" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
     </label>
       <label class="pull-left mb2x " style=" margin-left: 0!important">
      <em class="align-right" style=" padding-right:10px;">体&nbsp;重:&nbsp;kg</em>
      <input type="text" name="weight" class="name" title="请填写您的具体体重" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
    </label>
    <label class="mb2x js-measure-method">
      <em class="align-right" style="padding-right:10px;">量体方式</em>
      <select name="class_id" title="请选择量体方式">
        <option value="0">请选择</option>
        <option value="1">到店量体</option>
        <option value="2">上门量体</option>
      </select>
    </label>
   

  </div>
  <div class="clearfix arrange-horizontal pc-block">
    <label class="pull-right mb2x hide js-city">
      <em class="align-right" style="padding-right:10px;">选择城市</em>
      <select name="city_id" class="city_id" title="选择城市" style="background:#fff">
         <option value="0">请选择</option>
        <option value="0571">杭州</option>
        <option value="0510">无锡</option>
        <option value="025">南京</option>
      </select>
    </label>
    <label class="mb2x hide js-store" style="float:left">
      <em class="align-right" style="padding-right:10px;">门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;店</em>
      <select name="store_id" title="请选择门店">
        <option value="0">请选择</option>
        <option value="1">经纬店（杭州下城区石桥路279号经纬创意园9A103小蓝楼）</option>
        <option value="2">教工店（杭州市西湖区教工路158-2号）</option>
      </select>
    </label>
    <label class=" mb2x hide js-arrival-time">
      <em class="align-right" style="padding-right:10px;">到店时间</em>
      <input type="text" name="arrival_time" title="请填写到店时间" class="Wdate js-date">
    </label>
    <label class="db mb2x hide js-area">
      <em class="align-right area_title" style="padding-right:10px;">选择区域</em>
      <select name="area" class="area_option" title="<?php echo L('area_required'); ?>">
        <option value="0">请选择区域</option>
        <?php foreach (C("area") as $k=>$v):?>
        <option value="<?php echo $k;?>"><?php echo $v?></option>
        <?php endforeach;?>
      </select>
    </label>
  </div>
  <label class="db mb2x hide js-address pc-block">
    <em class="align-right" style="padding-right:10px;">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</em>
    <input type="text" name="address" title="<?php echo L('street_address_required'); ?>">
  </label>
  <label class="db mb1x">
    <em class="align-right" style="padding-right:10px;">留&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;言</em>
    <textarea name="remark" placeholder="<?php echo L('_additional_'); ?>" class="vt"></textarea>
  </label>
  <label class="db mb2x">
    <em></em>
    <p class="dib" style="width:74%;font-size:14px;">* 保密声明：我们不会把您的个人信息透露给第三方，请放心填写。</p>
  </label>
  <div class="align-center btn-row" style="margin-top: 40px;">
      <input type="hidden" name="dosubmit" value="1">
      <input type="button" id="submit_2" class="btn" value="立即预约"/>
  </div>
</form>
<div class="step">
  <img src="/statics/front/images/measure/schedule/liangtibuzou.jpg" class="vi-xs">
  </div>
<div class="rel main-width mt5x mb5x align-center phone-box">
  <p>轻松召唤专业搭配师</p>
  <div class="dib js-phone" style="border-bottom: 1px solid #3eabb8;">
   <strong style="font-size: 30px;color: #3eabb8;"><a href="tel:400-888-1532" data-ajax="false" style="text-decoration: none!important" >400-888-1532</a></strong>
</div>
</div>
<p class="mb1x align-center title black">OWNONLY实体店</p>
<div class="align-center shop shop-trans">
  <p>
    <strong class="black normal">杭州O2O体验店：</strong>
    <span class="db mt1x mb2x black">杭州市 西湖区 教工路 158-2号</span>
    <a href="javascript:;" class="map-view js-map2">查看地图</a>
  </p>
  <img src="/statics/front/images/measure/schedule/3.jpg" alt="杭州O2O体验店" width="70%" height="auto" class="hi-xs">
  <img src="/statics/front/images/measure/schedule/3.jpg" alt="杭州O2O体验店" class="vi-xs" style="transform: none;background-size: contain;">
</div>

<p class="mb1x align-center title black scrool-hide" style="margin-top: 1em; font-size: 16px">教工店</p>
<!-- <img src="/statics/front/images/measure/map.png" class="vi-xs" style="background-size:contain;">  -->

<div class="appointment align-center btn-row scrool-hide">
    <button type="button" class="btn" id="scrool-hidden-new" style="position: fixed; left: 0px; bottom: 0px;z-index: 999; display: none; ">立即预约量体</button>
</div>
<div class="align-center shop shop-trans one" style="margin-top: 20px;">
  <p>
    <strong class="black normal">经纬店：</strong>
    <span class="db mt1x mb2x black">下城区石桥路279号经纬创意园9A103小蓝楼</span>
    <a href="javascript:;" class="map-view js-map1">查看地图</a>
  </p>
  <img src="/statics/front/images/measure/schedule/jwd.jpeg" alt="经纬店" width="70%" height="auto" class="hi-xs">
  <img src="/statics/front/images/measure/schedule/jwd.jpeg" alt="经纬店" class="vi-xs" style="transform: none;background-size: contain;">
</div>
<p class="mb1x align-center title black scrool-hide" style="margin-top: 1em; font-size: 16px">经纬店</p>
<!--
<div class="align-center shop shop-trans one">
  <p>
    <strong class="black normal">工厂直营店：</strong>
    <span class="db mt1x mb2x black">杭州下城区石桥路279号经纬创意园9A103小蓝楼</span>
    <a href="javascript:;" class="map-view js-map1">查看地图</a>
  </p>
  <img src="/statics/front/images/measure/schedule/2.jpg" alt="工厂直营店">
</div>
-->
<div id="map1"></div>
<div id="map2"></div>
<script src="/statics/front/widgets/My97DatePicker/WdatePicker.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=mEWdV2P0NcBhaxcGBvlHfruy"></script>
<script>
$(function () {

    $("#submit_1").click(function(){
        $("#form_1").submit();
    });

    $("#submit_2").click(function(){
        $("#form_2").submit();
    });

    $("#scrool-hidden-new").click(function(){
        $("#form_1").submit();
    });
    var area_arr = '<?php echo json_encode(C("area_arr"));?>';
    var area = JSON.parse(area_arr);
    $('.city_id').change(function(){
       // var this_title = $(this).find("option:selected").text();
        //$('.area_title').html(this_title)
        var city_id = $(this).val();
        if(city_id!='0'){
            var this_area_data = area[city_id];
            var html = '<option value="0">请选择区域</option>';
            for(var i in this_area_data){
                html += '<option value="'+i+'">'+this_area_data[i]+'</option>'
            }
            $('.area_option').html(html);
            $(this).parents('.js-form').find('.js-area').removeClass('hide');
        }else{
            $(this).parents('.js-form').find('.js-area').addClass('hide');
        }

    });
    $('#form_1').validate({
        errorElement: 'p',
        submitHandler: function(form) {
            form.submit();
        },
        errorPlacement: function(error, element) {
            var differ = element.offset().left - element.parent().offset().left;
            element.after(error);
            error.addClass('msg').css('margin-left', differ);
        },
        rules: {
            height:'required',
            weight:'required',
            name: 'required',
            phone: 'required',
            area: {
                min: 1
            },
            class_id: {
                min: 1
            },
            store_id: {
                min: 1
            },
            arrival_time: 'required',
            address: 'required'
        }
    });
    /*
  $('#form_1').validate({
    errorElement: 'p',
    submitHandler: function(form) {
        $('#form_1').submit();
    },
    errorPlacement: function(error, element) {
      var differ = element.offset().left - element.parent().offset().left;
      element.after(error);
      error.addClass('msg').css('margin-left', differ);
    },
    rules: {
	  height:'required',
        weight:'required',
      name: 'required',
      phone: 'required',
      area: {
        min: 1
      },
      class_id: {
        min: 1
      },
      store_id: {
        min: 1
      },
      arrival_time: 'required',
      address: 'required'
    }
  });
    */
  $('.js-date').on('click', function () {
    WdatePicker({
      skin: 'biggerSize'
    });
  });

  $('.js-measure-method').on('change', 'select', function () {//量体方式
    var $area = $('.js-area'),
        $city = $('.js-city'),
        $store = $('.js-store'),
        $arrivalTime = $('.js-arrival-time'),
        $address = $('.js-address'),
        selectedVal = $(this).val();

    if (selectedVal === '0') {
      $area.add($city).add($store).add($arrivalTime).add($address).addClass('hide');
    } else if (selectedVal === '1') {//到店量体
      $city.add($area).add($address).addClass('hide');
      $store.add($arrivalTime).removeClass('hide');
    } else if (selectedVal === '2') {//上门量体
      $city.add($address).removeClass('hide');
      var city_hide = $(this).parents('.js-appointment').find(".city_id").val();
      console.log(city_hide)
      if(city_hide!=0){
        $area.removeClass('hide');
      }
      $store.add($arrivalTime).addClass('hide');
    }
  })
  .find('select').each(function () {
    var $select = $(this),
        selectedVal = $select.val();
    $.each($select.find('option'), function () {
      if ($(this).val() === selectedVal) {
        $select.trigger('change');
        return false;
      }
    });
  });

  $('.js-appointment').on('click', '.js-phone', function () {
    window.location.href = 'tel://400-888-1532';
  });

  (function () {//地图
    var $map1 = $('#map1'),
        $map2 = $('#map2'),
        addControl = function (map) {// 添加地图类型控件
          var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
          var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
          map.addControl(top_left_control);
          map.addControl(top_left_navigation);
        },
        map = function (settings) {
          var id = settings.id,
              coords = settings.coords,
              city = settings.city,
              info = settings.info;

          // 百度地图API功能
          var map = new BMap.Map(id);                                    // 创建Map实例
          var point = new BMap.Point(coords.longitude, coords.latitude);
          map.centerAndZoom(point, 15);                                  // 初始化地图,设置中心点坐标和地图级别
          map.setCurrentCity(city);                                      // 设置地图显示的城市 此项是必须设置的
          map.enableScrollWheelZoom(true);                               // 开启鼠标滚轮缩放
          var infoWindow = new BMap.InfoWindow(info);                    // 创建信息窗口对象
          map.openInfoWindow(infoWindow, point);                         // 开启信息窗口
          addControl(map);
          map.panBy(50, -100);                                           //设置地图显示的偏移量(像素)
        },
        sizeAndposition = function (selector) {
          var $win = $(window),
              winWidth = $win.width(),
              winHeight = $win.height(),
              scrollTop = $win.scrollTop(),
              $selector = $(selector),
              width = $selector.removeClass('hide').addClass('map').width(),
              height = 500,
              left = 10;

          if (width >= winWidth / 2) {
            width = width;
            left = 10;
          } else {
            width = winWidth / 2;
            left = (winWidth - winWidth / 2) / 2;
          }

          return {
            width: width,
            height: height,
            top: (winHeight - height) / 2 + scrollTop,
            left: left
          };
        };

    $('.js-map1').on('click', function () {
      var sizePos = sizeAndposition('map1');

      setTimeout(function () {
        map({
          id: 'map1',
          coords: {
            longitude: 120.190282,
            latitude: 30.324637
          },
          city: '杭州',
          info: '杭州下城区石桥路279号经纬创意园9A103小蓝楼'
        });
      }, 0);

      $map2.addClass('hide');
      $map1.removeClass('hide').addClass('map')
        .css({'top': sizePos.top, 'left': sizePos.left, 'width': sizePos.width, 'height': sizePos.height})
        .after('<div class="mask show js-mask"></div>')
        .next('.js-mask')
        .on('click', function () {
          $(this).remove();
          $map1.addClass('hide');
        });
    });


    $('.js-map2').on('click', function () {
      var sizePos = sizeAndposition('map2');

      setTimeout(function () {
        map({
          id: 'map2',
          coords: {
            longitude: 120.142495,
            latitude: 30.287795
          },
          city: '杭州',
          info: '杭州市西湖区教工路158-2号<br>O2O体验店'
        });
      }, 0);

      $map1.addClass('hide');
      $map2.removeClass('hide').addClass('map')
        .css({'top': sizePos.top, 'left': sizePos.left, 'width': sizePos.width, 'height': sizePos.height})
        .after('<div class="mask show js-mask"></div>')
        .next('.js-mask').on('click', function () {
          $(this).remove();
          $map2.addClass('hide');
        });
    });
  }());
});
</script>
<!--移动端屏幕滚动显示按钮script-->
<script>
 $(window).scroll(function(){
	 if($(this).scrollTop()>1000){
		 $("#scrool-hidden-new").css({"display":"block","opacity":1,"bottom":"0px"})
	 }else{
		 $("#scrool-hidden-new").css({"display":"none","opacity":0,"bottom":"0"})

	 }

	 })
</script>
<script src="/statics/front/js/scripts/measure/index.js"></script>

<?php include THEMES_PATH.'public/footer2.phtml';?>
<?php include THEMES_PATH.'public/after_body.phtml';?>